﻿<UserControl x:Class="Bewise.Phone.SearchBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="clr-namespace:Bewise.Phone.Controls" mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    <Grid Name="filterBox" Height="60" Background="{StaticResource PhoneChromeBrush}" Opacity="0" Visibility="Collapsed">
        <Grid.Resources>
            <Storyboard x:Key="moveUp">
                <DoubleAnimation Duration="0:0:0.1" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="filterBox"/>
                <DoubleAnimation Duration="0:0:0.1" To="0" Storyboard.TargetProperty="Y" Storyboard.TargetName="filterBoxTranslate"/>
            </Storyboard>
            <Storyboard x:Key="moveDown">
                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="filterBox"/>
                <DoubleAnimation Duration="0:0:0.2" To="-60" Storyboard.TargetProperty="Y" Storyboard.TargetName="filterBoxTranslate"/>
            </Storyboard>
        </Grid.Resources>
        <Grid.RenderTransform>
            <TranslateTransform x:Name="filterBoxTranslate" Y="-60"/>
        </Grid.RenderTransform>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="60"/>
        </Grid.ColumnDefinitions>
        <TextBox x:Name="filterText" Grid.Column="0" BorderThickness="1" FontSize="{StaticResource PhoneFontSizeSmall}"  TextChanged="filterText_TextChanged" KeyUp="filterText_KeyUp" />
        <Button Grid.Column="1" Name="filterButton" Click="filterButton_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Bewise.Phone;component/Images/appbar.feature.search.rest.png" Name="image">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="image"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Image>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>
